<template>
  <div class="body">
    <div class="body_left">
      <BaseMenu
        :menuList="bodyLeft"
        :chidrenShow="chidrenShow"
        :chidrenShowTwo="chidrenShowTwo"
        @go="go"
      />
    </div>
    <div class="body_right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import BaseMenu from '@/components/baseMenu/baseMenu'

export default {
  name: 'index',
  components: {
    BaseMenu
  },
  data() {
    return {
      bodyLeft: [
        {
          path: '/wisdomConstruction/projectOverview',
          title: '项目看板',
          icon: 'xiangmukanban',
          id: 451
        },
        {
          path: '',
          title: '建设项目管理',
          icon: 'zhjs-jsxmgl',
          id: 452,
          children: [
            {
              path: '/wisdomConstruction/messageManagement',
              title: '项目信息管理',
              id: 4521,
              icon: 'zhjs-xmxxgl'
            },
            {
              path: '/wisdomConstruction/projectGrowthTree',
              title: '项目生长树',
              id: 4522,
              icon: 'zhjs-xmscs'
            }
          ]
        },

        {
          path: 'danganguanli',
          title: '项目档案管理',
          icon: 'zhjs-xmdagl',
          id: 453,
          children: [
            {
              path: '/wisdomConstruction/fileManagement/preliminaryProcedure',
              title: '前期手续',
              id: 4531,
              icon: 'zhjs-qqsx'
            },
            {
              path: '/wisdomConstruction/fileManagement/projectDesign',
              title: '项目设计',
              id: 4532,
              icon: 'zhjs-xmsj'
            },
            {
              path: '/wisdomConstruction/fileManagement/projectBidding',
              title: '项目招标',
              id: 4533,
              icon: 'zhjs-xmzb'
            },
            {
              path: '/wisdomConstruction/fileManagement/projectImply',
              title: '项目实施',
              id: 4534,
              icon: 'zhjs-xmss'
            },
            {
              path: '/wisdomConstruction/fileManagement/projectSettlement',
              title: '项目结算、决算',
              id: 4535,
              icon: 'zhjs-xmjs'
            }
          ]
        },
        {
          path: '/wisdomConstruction/reportManagement',
          title: '安全报告管理',
          icon: 'zhjs-aqbggl',
          id: 455
        },
        {
          path: '/wisdomConstruction/projectPatrolManagement',
          title: '项目巡查管理',
          icon: 'zhjs-xmxcgl',
          id: 459,
          children: [
            {
              path: '/wisdomConstruction/projectPatrolManagement/patrolProject',
              title: '巡查项目管理',
              icon: 'zhjs-xcxmgl',
              id: 4591
            },
            {
              path: '/wisdomConstruction/projectPatrolManagement/patrolRecord',
              title: '巡查记录管理',
              icon: 'zhjs-xcjlgl',
              id: 4592
            }
          ]
        },
        {
          path: '/wisdomConstruction/noticeManagement',
          title: '通知管理',
          icon: 'tongzhiguanli',
          id: 456
        },
        {
          path: '/wisdomConstruction/projectExport',
          title: '项目导出',
          icon: 'zhjs-xmdc',
          id: 454
        }
        // {
        //   path: '/wisdomConstruction/epidemicManagement',
        //   title: '疫情管理',
        //   icon: 'yiqingguanli',
        //   id: 457
        // }
      ],
      chidrenShow: true,
      chidrenShowTwo: false
    }
  },
  computed: {
    routerPath() {
      return this.$route.path
    }
  },
  methods: {
    // 路由跳转
    go(path) {
      if (path.indexOf('/wisdomConstruction') > -1) {
        this.$router.push(path)
        // this.chidrenShow = false
      } else if (path === 'danganguanli') {
        this.chidrenShow = !this.chidrenShow
      } else if (path === 'rizhi') {
        this.chidrenShowTwo = !this.chidrenShowTwo
      }
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  color: #000;
  height: calc(100vh - 60px);
  width: 100%;
  display: flex;

  &_left {
    width: 296px;
    height: 100%;

    .item {
      width: 100%;
      height: auto;
      text-align: left;
      // padding-left: 22px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #4c565c;
      line-height: 50px;

      :hover {
        cursor: pointer;
      }
    }

    .activeItem {
      //background: red;
      background: rgba(234, 245, 253, 1);
      border-right: 3px solid #4a80a3;
      color: #497fa3;
      //color: #EAF5FD;
    }
  }

  &_right {
    display: flex;
    width: calc(100% - 297px);
    height: 100%;
    background: #eff3f9;
  }
}
</style>
